<!--  -->
<template>
    <el-dialog v-model="dialogFormVisible" title="系统公告" width="40%">
        <el-form :model="noticeForm" :rules="rules" ref="noticeForms" status-icon>
            <el-form-item prop="title" label="公告标题" :label-width="formLabelWidth">
                <el-input v-model="noticeForm.title" autocomplete="off" placeholder="请输入公告标题" />
            </el-form-item>
            <el-form-item prop="content" label="公告内容" :label-width="formLabelWidth">
                <el-input v-model="noticeForm.content" :rows="8" type="textarea" placeholder="请输入公告内容" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
let noticeForm = reactive({
    title: '',
    content: ''
})
let noticeForms = ref()
let dialogFormVisible = ref<Boolean>(true)
let formLabelWidth = ref<String>('80px')

// 表单校验
const rules = {
    title: [{ required: true, message: '公告标题不能为空', trigger: 'blur' }],
    content: [{ required: true, message: '公告内容不能为空', trigger: 'blur' }]
}
// 确定按钮回调
const submit = async () => {
    await noticeForms.value.validate();
    // 表单校验通过
    try {
        //发请求 新增 编辑 公告

        dialogFormVisible.value = false
    } catch (e) {
        console.error(e);
    }
}
defineProps(['operateNoticInfo'])

</script>

<style lang="scss" scoped>
.el-form {
    padding: 20px 30px;
}
</style>